<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>大学生社团主页</title>
    <link href="/css/add.css" type="text/css" rel="stylesheet">
    <link href="/css/clubHome.css" type="text/css" rel="stylesheet">
    <link href="/css/layui.css" type="text/css" rel="stylesheet">
    <script src="/js/layui.js" type="text/javascript"></script>
    <script src="/js/jquery-3.7.1.js" type="text/javascript"></script>
    <script>
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
        });
    </script>
<%--    <script type="text/javascript">--%>
<%--        $(function () {--%>
<%--            // 发出ajax请求评论--%>
<%--            $.get("/comment/getCommentById", (data) => {--%>
<%--                console.log(data);--%>
<%--                alert(data)--%>
<%--            })--%>
<%--        })--%>
<%--    </script>--%>
</head>

<body>
<div id="up">
    <ul>
        <li>
            <span><a href="">社团 </a>> 社团首页 ></span>
        </li>
    </ul>
</div>
<div>
    <div class="layui-carousel banner-container" id="ID-carousel-demo-image" style="width: 100%; text-align: center">
        <div carousel-item>
            <div><img style="width: 600px;" src="/img/Carousel/0.jpg" alt="社团logo"></div>
            <div><img style="width: 600px;" src="/img/Carousel/1.jpg" alt="社团logo"></div>
            <div><img style="width: 600px;" src="/img/Carousel/2.jpg" alt="社团logo"></div>
            <div><img style="width: 600px;" src="/img/Carousel/3.jpg" alt="社团logo"></div>
            <div><img style="width: 600px;" src="/img/Carousel/4.jpg" alt="社团logo"></div>
        </div>
    </div>
    <hr>
    <div class="container">
        <c:forEach items="${clubHomeList}" var="clubHome" varStatus="status">
            <div class="product">
                <img style="height: 300px;" src="${clubHome.logoUrl}" alt="社团logo">
                <div class="product-info">
                    <h1>社团编号${clubHome.clubID}：${clubHome.clubName}</h1>
                    <p>社团风采：${clubHome.clubStyle}</p>
                    <p>社团招新：${clubHome.clubRecruitment}</p>
                    <div class="product-price"> 联系我们：${clubHome.contactUs} </div>
                    <a href="/club/getClubById?id=${clubHome.clubID}" style="background: #1DC779;"
                       class="button">社团详情</a>
                    <a href="/club/clubAddUser?clubID=${clubHome.clubID}&id=${user2.id}"
                       class="button" id="clubAddUser" onclick="return confirm('申请加入社团？')">加入社团</a>
                    <a class="button" href="/comment/getCommentAll">留言板</a>
                </div>
            </div>
            <hr>
        </c:forEach>
        <div style="float:right;">
            <a href="/club/clubHome?currentPage=1">首页</a>
            <a href="/club/clubHome?currentPage=${clubHomePages.getPrePage()}">上一页</a>
            <c:forEach items="${clubHomePages.getPageList()}" var="num">
                <a href="/club/clubHome?currentPage=${num}">[${num}]</a>
            </c:forEach>
            <a href="/club/clubHome?currentPage=${clubHomePages.getNextPage()}">下一页</a>
            <a href="/club/clubHome?currentPage=${clubHomePages.getTotalPage()}">尾页</a>
        </div>
    </div>
</div>
</body>

</html>
